<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="4" style="margin-left: 10px;">
            <div style="display: inline-block;vertical-align: middle;line-height: 25px;">
                <el-input size="small" v-model="listQuery.condition.name.value" style="width: 140px;border:#eeeeee;margin:12px 10px;"
                          class="filter-item" placeholder="用户名称" clearable
                          prefix-icon="el-icon-search">
                </el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="display: inline-block;vertical-align: middle;line-height: 25px;margin-left:20px;">
                <el-input size="small" v-model="listQuery.condition.orgNames.value" style="width: 180px;margin:12px 10px;"
                          class="filter-item" placeholder="机构名称" clearable
                          prefix-icon="el-icon-search">
                </el-input>
            </div>
          </el-col>
          <el-col :span="4">
             <div style="display: inline-block;vertical-align: middle;line-height: 25px;margin-left:80px;">
              <el-button size="small" style="height:30px;padding-top:0px;line-height:30px;margin:12px 10px;" type="success" @click="getList('find')">查 询</el-button>
             </div>
          </el-col>
          <el-col :span="4">
             <div style="display: inline-block;vertical-align: middle;line-height: 25px;margin-left:20px;">
              <el-button size="small" style="height:30px;padding-top:0px;line-height:30px;margin:12px 10px;" type="danger" icon="el-icon-edit" @click="handleReset()">重 置</el-button>
             </div>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :gutter="5">
          <el-col :span="24">
            <el-table :key='tableKey' :data="list"
                      element-loading-text="给我一点时间"
                      height="285"
                      size="small"
                      border fit highlight-current-row style="width: 100%;border:#eeeeee">
              <el-table-column align="center" label="序号" type="index">
                <template slot-scope="scope">
                <span>{{scope.$index + (serialNumber - 1) * 10 + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="登录名称" prop="loginName">
                <template slot-scope="scope">
                  <span>{{scope.row.loginName}}</span>
                </template>
              </el-table-column>
              <el-table-column width="100" align="center" label="用户名称" prop="name">
                <template slot-scope="scope">
                  <span>{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" width="300" label="机构名称" prop="orgNames">
                <template slot-scope="scope">
                  <span>{{scope.row.orgNames }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="用户状态" prop="status">
                <template slot-scope="scope">
                  <span>{{scope.row.status | statusFilter}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操 作">
                <template slot-scope="scope">
                  <!--<el-button type="text" size="small" @click="handleEdit(scope.row)" style="width:30px;">编辑</el-button>-->
                  <el-button type="text" size="small" @click="handleAdd(scope.row)" style="width:30px; margin-left:5px;">添加</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-container">
              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
              </el-pagination>
            </div>
          </el-col>
          <el-col style="text-align: right;">
            <el-button size="small" class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-dialog title="兼职详细" :visible.sync="detailDialog" width="450px" :close-on-click-modal="false" :destroy-on-close="true"
               v-if="detailDialog" top="100px" custom-class="myDialog" :append-to-body="true">
      <div>
        <div style="padding-bottom: 15px">
          <el-form ref="detailForm" :model="detailRecord" :rules="detailDialogRules" label-position="top" size="small"  label-width="110px">
            <el-row>
              <el-col>
                <el-form-item label="是否用于身份切换" prop="useIdentitySwitching">
                  <el-select placeholder="请选择" v-model="detailRecord.useIdentitySwitching" clearable>
                    <el-option v-for="item in isInnerOption" :key="item.key" :label="item.display_name" :value="item.key">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div style="display: inline-block; width: 100%;text-align: right;">
          <el-button size="small" type="success" @click="doSaveDetail()">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    insertItem,
    selectNoExistUser
  } from '@/api/systemManage/partJobManagement'
  import {
    statusKeyValue,
    isInnerOption
  } from '@/utils/allOptions'

  export default {
    name: 'newUser',
    props: ['partJobData'],
    data() {
      return {
        total: 0,
        list: [],
        tableKey: 0,
        listQuery: {
          rowBounds: {
            offset: 0,
            limit: 10
          },
          condition: {
            orgNames: {
              property: 'orgNames',
              value: '',
              type: 'LIKE'
            },
            name: {
              property: 'name',
              value: '',
              type: 'LIKE'
            },
            orgId: {
              property: 'orgId',
              value: this.partJobData,
              type: 'NE'
            }
          },
          sort: [{
            direction: 'ASC',
            property: 'id'
          }]
        },
        targetUserId: '',
        serialNumber: 1,
        isInnerOption: isInnerOption,
        selectUserId: '',
        detailDialog: false,
        detailRecord: {
          useIdentitySwitching: '1'
        },
        detailDialogRules: {
          useIdentitySwitching: [
            { message: '是否用于身份切换不能为空', required: true, trigger: 'change' }
          ]
        }
      }
    },
    filters: {
      statusFilter(target) {
        return statusKeyValue[target]
      }
    },
    methods: {
      handleSizeChange(val) {
        this.listQuery.rowBounds.limit = val
        this.getList()
      },
      // 翻页器使用
      handleCurrentChange(val) {
        this.serialNumber = val
        this.listQuery.rowBounds.offset =
          this.listQuery.rowBounds.limit * (val - 1)
        this.getList()
      },
      getList(flag) {
        this.listQuery.id = this.partJobData
        if (flag ==='find') {
          this.listQuery.rowBounds.offset = 0
          this.total = 0
          this.serialNumber = 1
        }
        if (flag ==='insert') {
          if (this.listQuery.rowBounds.offset == (this.total - 1)
           && this.listQuery.rowBounds.offset >= this.listQuery.rowBounds.limit) {
            this.listQuery.rowBounds.offset -=this.listQuery.rowBounds.limit
            this.serialNumber -= 1
          }
        }
        selectNoExistUser(this.listQuery).then(response => {
          this.list = response.data.data.records
          this.total = response.data.data.count
        })
      },
      closeSelf() {
        this.$emit('changeCloseDialog')
      },
      saveData() {
        this.$refs.targetForm.validate(valid => {
          if (valid) {
            // this.temp.password = '123456'
            insertItem(this.temp).then(response => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.$router.push({ name: 'partJobManagement' })
              this.targetUserId = response.data.data.id
            })
          }
        })
      },
      // handleDelete(row,flag) {
      //   var data = {
      //     userId: row.id,
      //     orgId: this.partJobData
      //   }
      //   insertItem(data).then(response => {
      //     this.getList(flag)
      //     this.$message({
      //       message: '添加成功',
      //       type: 'success'
      //     })
      //   })
      //   this.getList(flag)
      // },
      handleReset() {
        this.selectUserId = ''
        this.listQuery.condition.name.value = ''
        this.listQuery.condition.orgNames.value = ''
        this.listQuery.condition.orgId.value = ''
        this.listQuery.rowBounds.offset = 0
        this.total = 0
        this.serialNumber = 1
        this.getList()
      },
      handleAdd(row) {
        this.selectUserId = row.id
        this.detailRecord.useIdentitySwitching = '1'
        this.detailDialog = true
      },
      doSaveDetail() {
        this.$refs['detailForm'].validate((valid) => {
          if (valid) {
            this.detailDialog = false
            let data = {
              userId: this.selectUserId,
              orgId: this.partJobData,
              useIdentitySwitching: this.detailRecord.useIdentitySwitching
            }
            insertItem(data).then(response => {
              this.getList('insert')
              if (response.data && response.data.success) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
              } else {
                this.$message({
                  message: '添加失败',
                  type: 'error'
                })
              }
            })
          } else {
            this.$message({
              type: 'error',
              message: '数据验证失败!'
            })
            return false
          }
        })
      }
    },
    created() {
      this.getList()
    }
  }
</script>

